<template>
    <a-layout>
        <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible :style="{ overflow: 'auto', height: '100vh' }">
            <div class="logo" v-if="!collapsed">疾控中心绩效管理系统</div>
            <div class="logo" v-if="collapsed">绩效</div>
            <!-- <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
                <a-menu-item v-for="item in router.options.routes" :key="item.path" @click="handleClickMenu(item)">
                    <CopyOutlined />
                    <span>{{ item.meta && item.meta.title }}</span>
                </a-menu-item>
            </a-menu> -->
            <a-menu theme="dark" mode="inline" 
            v-model:openKeys="openKeys"
            v-model:selectedKeys="selectedKeys"
            >
                <template v-for="item in router.options.routes" :key="item.path">
                    <template v-if="item.meta && !item.meta.isHide">
                        <a-menu-item v-if="
                            item.children &&
                            item.children.length <= 1 &&
                            item.meta &&
                            !item.meta.isHide
                        "
                        :key="item.path"
                         @click="handleClickMenu(item, item)"
                        >
                            <CopyOutlined />
                            <span >{{ item.meta && item.meta.title }} </span>
                        </a-menu-item>
                        <a-sub-menu :key="item.path" v-else>
                            <template #title>
                                <CopyOutlined />
                                <span >{{ item.meta && item.meta.title }} </span>
                            </template>
                            <div v-for="children in item.children" :key="children.path">
                                <a-menu-item :key="children.path" @click="handleClickMenu(children, item)"
                                    v-if="children.meta && !children.meta.isHide">
                                    <span>{{ children.meta && children.meta.title }}</span>
                                </a-menu-item>
                            </div>
                        </a-sub-menu>
                    </template>
                </template>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header style="background: #fff; padding:0;padding-right: 34px;">
               <div style="display: flex;align-items: center;justify-content: space-between;">
               
                <div style="display: flex;align-items: center;">
                    <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
                    <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
                    <a-breadcrumb style="margin: 16px 0">
                        <a-breadcrumb-item v-for="(item, index) in menuStore.selectedMenuItem">
                            {{ item.meta && item.meta.title }}
                        </a-breadcrumb-item>
                    </a-breadcrumb>
                </div>
                <div style="display: flex;align-items: center;">
                    <div style="margin-right: 10px;">
                    <a-input v-model:value="userStore.empid" placeholder="empid" />
                    </div>
                    <!-- <div style="margin-right: 10px;">{{ userStore.userInfo.empname }}</div> -->
                    <div style="z-index: 999;" >
                    <a-dropdown>
                        <a class="ant-dropdown-link" @click.prevent>
                            <a-badge :count="totalTaskNum">
                                <BellOutlined style="font-size: 24px;"/>
                            </a-badge>
                        </a>
                        <template #overlay>
                            <a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys">
                                <template v-for="item in noticeRoutes" :key="item.path">
                                    <template v-for="children in item.children" :key="children.path" >
                                        <a-menu-item v-if="children.meta && children.meta.isNotice"  @click="handleClickMenu(children,item)" :key="children.path">{{ children.meta && children.meta.title }} (<span style="color: #f00f00;">{{ children.meta.count }}</span> ）</a-menu-item>
                                    </template>
                                </template>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </div>
               
                </div>
              
               </div>
            </a-layout-header>
            <a-layout-content :style="{ margin: '15px', padding: '15px', background: '#fff', minHeight: '280px','z-index': '2' }"
                class="layout-contnet">
                <RouterView />
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import {GetPendingMessageCount} from '@/api/main'
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    CopyOutlined,
    BellOutlined
} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import useUserStore from "@/stores/modules/user";
const userStore = useUserStore()
const router = useRouter()
const selectedKeys = ref<string[]>(['/'])
const openKeys = ref<string[]>(['/'])
const collapsed = ref<boolean>(false)
import useMenuStore from "@/stores/modules/menu";
const noticeRoutes = ref([])
const totalTaskNum = ref(0)
const menuStore = useMenuStore();

 // 控制菜单显示隐藏
// router.options.routes.forEach(item=>{
//     if(item.meta){
//          if(item.meta.title=="发起考核" ||item.meta.title=="全员考核统计"){
//             if(userStore.yn){
//                 item.meta.isHide = false
//                 router.push('/')
//             }else {
//                 item.meta.isHide = true
//                 router.push('/my-assessment')
                
//             }
        
//         }
//     }
// })

selectedKeys.value = menuStore.selectedKeys;
openKeys.value = menuStore.openKeys;
const getNotice = ()=>{
    GetPendingMessageCount({ empId: userStore.empid,}).then((response:any)=>{
        totalTaskNum.value = response.data.totalTaskNum
        noticeRoutes.value = router.options.routes
        noticeRoutes.value.forEach(item=>{
           if(item.children){
            item.children.forEach(children=>{
                if(children.meta && children.meta.isNotice){
                   if(children.meta.title=="待提交"){
                    children.meta.count = response.data.waitSubmitTaskNum
                   }
                   if(children.meta.title=="我的待办"){
                    children.meta.count = response.data.waitTransactTaskNum
                   }
                   if(children.meta.title=="汇总审核"){
                    children.meta.count = response.data.waitSumTaskNum
                   }
                }
            })
           }
        })
    })
}
getNotice()
// setInterval(()=>{
//     getNotice()
// },5000)
const handleClickMenu = (item: any, parentItem: any) => {
    openKeys.value = [parentItem.path];
    selectedKeys.value = [item.path];
    router.push(item.path)
    menuStore.selectedKeys = [item.path];
    menuStore.openKeys = [parentItem.path];
    menuStore.selectedMenuItem = [parentItem ? parentItem : [], item];
}

</script>
<style>
.trigger {
    font-size: 18px;
    padding: 0 15px;
    cursor: pointer;
    transition: color 0.3s;
}

.trigger:hover {
    color: #1890ff;
}

.logo {
    height: 32px;
    text-align: center;
    color: #ffffff;
    margin: 16px;
}


.layout-contnet {
    height: calc(100vh - 94px);
    overflow: scroll;
}
</style>